<template>
    <li class="product-item-box">
        <div class="product-item__body" @click="handleClick">
            <!-- <div class="product-item-cover">
                <ask-image :src="item.cover"></ask-image>
            </div> -->
            <div class="product-item-info">
                <div class="product-item__text">{{item.name || "-"}}</div>
                <!-- <div class="product-item__icon">
                    <el-button @click.stop="handleRemove" type="danger" icon="el-icon-delete" circle></el-button>
                </div> -->
            </div>
            <div class="product-item-info">
                <div class="product-item__text small">{{item.department || "-"}}</div>
                <!-- <div class="product-item__icon">
                    <el-button @click.stop="handleRemove" type="danger" icon="el-icon-delete" circle></el-button>
                </div> -->
            </div>
        </div>
    </li>
</template>

<script lang="ts">
import { Component, Vue, Prop, Emit } from "vue-property-decorator";

@Component
export default class ProductItem extends Vue {
    @Prop({
        type: Object,
        default: () => {
            return {};
        }
    })
    readonly item!: any;

    @Emit("item-click")
    handleClick() {
        return this.item;
    }

    @Emit("item-remove")
    handleRemove() {
        return this.item;
    }
}
</script>
